<template>
    <!-- 首页 -->
    <div id="in">
        <Nav></Nav>
        <Carousel></Carousel>

        <h2>新歌首发</h2>
        | <router-link to="/" class="newSong">最新</router-link>|
        <span v-for="(item, i) in region" :key="i">
            <router-link class="newSong" :to="{ path: '/region', query: { id: `${item}` } }"> {{ item }}</router-link> |
        </span>
        <router-view />

        <h2>排行榜</h2>
        <div style="width: 80%;margin: 0px auto;">
            <el-row>
                <el-col :span="4" class="peak">
                    <span>巅峰榜</span><br>
                    <span>热歌</span><br>
                    <img @click="toRank" class="rankImg" :src="require('../../public/播放.png')">
                    <div class="grid-content bg-purple" v-for="(item, index) in recommends" :key="index">
                        <div class="rank">
                            <span>{{ index + 1 }}</span>
                            <router-link :to="{ path: '/song', query: { id: item.songsID } }">
                                {{ item.songName }}
                            </router-link><br>
                            <span>&nbsp;</span>
                            <router-link :to="{ path: '/song', query: { id: item.songsID } }">
                                {{ item.singerName }}
                            </router-link>
                        </div>
                    </div>
                </el-col>
                <el-col :span="1">
                    <div>&nbsp;</div>
                </el-col>
                <el-col :span="4" class="peak">
                    <span>巅峰榜</span><br>
                    <span>欧美</span><br>
                    <img @click="toRank" class="rankImg" :src="require('../../public/播放.png')">
                    <div class="grid-content bg-purple-light" v-for="(item, index) in a[1]" :key="index">
                        <div class="rank">
                            <span>{{ index + 1 }}</span>
                            <router-link :to="{ path: '/song', query: { id: item.songsID } }">
                                {{ item.songName }}
                            </router-link>
                            <br>
                            <span>&nbsp;</span>
                            <router-link :to="{ path: '/song', query: { id: item.songsID } }">
                                {{ item.singerName }}
                            </router-link>
                        </div>
                    </div>
                </el-col>
                <el-col :span="1">
                    <div>&nbsp;</div>
                </el-col>
                <el-col :span="4" class="peak">
                    <span>巅峰榜</span><br>
                    <span>韩国</span><br>
                    <img @click="toRank" class="rankImg" :src="require('../../public/播放.png')">
                    <div class="grid-content bg-purple" v-for="(item, index) in a[2]" :key="index">
                        <div class="rank">
                            <span>{{ index + 1 }}</span>
                            <router-link :to="{ path: '/song', query: { id: item.songsID } }">
                                {{ item.songName }}
                            </router-link><br>
                            <span>&nbsp;</span>
                            <router-link :to="{ path: '/song', query: { id: item.songsID } }">
                                {{ item.singerName }}
                            </router-link>
                        </div>
                    </div>
                </el-col>
                <el-col :span="1">
                    <div>&nbsp;</div>
                </el-col>
                <el-col :span="4" class="peak">
                    <span>巅峰榜</span><br>
                    <span>内陆</span><br>
                    <img @click="toRank" class="rankImg" :src="require('../../public/播放.png')">
                    <div class="grid-content bg-purple-light" v-for="(item, index) in a[0]" :key="index">
                        <div class="rank">
                            <span>{{ index + 1 }}</span>
                            <router-link :to="{ path: '/song', query: { id: item.songsID } }">
                                {{ item.songName }}
                            </router-link><br>
                            <span>&nbsp;</span>
                            <router-link :to="{ path: '/song', query: { id: item.songsID } }">
                                {{ item.singerName }}
                            </router-link>
                        </div>
                    </div>
                </el-col>
                <el-col :span="1">
                    <div>&nbsp;</div>
                </el-col>
                <el-col :span="4" class="peak">
                    <span>巅峰榜</span><br>
                    <span>日本</span><br>
                    <img @click="toRank" class="rankImg" :src="require('../../public/播放.png')">
                    <div class="grid-content bg-purple-light" v-for="(item, index) in a[3]" :key="index">
                        <div class="rank">
                            <span>{{ index + 1 }}</span>
                            <router-link :to="{ path: '/song', query: { id: item.songsID } }">
                                {{ item.songName }}
                            </router-link><br>
                            <span>&nbsp;</span>
                            <router-link :to="{ path: '/song', query: { id: item.songsID } }">
                                {{ item.singerName }}
                            </router-link>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <Footer></Footer>
    </div>
</template>

<script>
import Nav from "../components/nav.vue";
import Carousel from "../components/playlistRec.vue";
import Footer from "../components/footer.vue";
export default {
    data() {
        return {
            recommends: "",
            a: [],
            region: ["内陆", "日本", "港澳"],
        }
    },
    components: {
        Nav,
        Carousel,
        Footer
    },
    methods: {
        toRank: function () {
            this.$router.push("/rank")
        },
        send: function (id, subscript) {
            this.axios({
                url: "/api/listens/regions",
                params: {
                    regionID: id
                }
            }).then(res => {
                this.a[subscript] = res.data.data.data.slice(0, 3)
                this.a[subscript].forEach(i => {
                    i.singerName = i.singerName.join("")
                });
                // console.log(this.a);
            }).catch(err => {
                console.log(err);
                console.log(id, ",请求失败");
            })
        },

    },
    created: function () {
        this.send("内陆", 0)
        this.send("欧美", 1)
        this.send("韩国", 2)
        this.send("日本", 3)
        this.axios({
            url: "/api/listens/recommends",
        }).then(res => {
            this.recommends = res.data.data.data.slice(0, 3)
            this.recommends.forEach(i => {
                i.singerName = i.singerName.join(",")
            });
        }).catch(err => {
            console.log(err);
            console.log("热歌请求失败");
        })
    }
};
</script>

<style>
#in {
    text-align: center;
    margin: 0px;
    padding: 0px;
}

.el-row {
    margin-bottom: 20px;

    &:last-child {
        margin-bottom: 0;
    }
}

.el-col {
    border-radius: 4px;
}

#in .peak .rankImg {
    margin-top: 10px;
    height: 40px;
    width: 40px;
}

#in .peak .rankImg:hover {
    cursor: pointer;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.peak {
    height: 450px;
    background-image: url("../../public/粉紫背景图.jpg");
}

#in .peak .rank {
    margin-top: 10px;
}

#in .peak .rank span {
    float: left;
    margin-right: 0px;
    margin-left: 10px;
}

a {
    color: black;
    text-decoration: none;
}

a:hover {
    cursor: pointer;
    color: white;
}

#in .newSong:hover {
    cursor: pointer;
    color: violet;
}
</style>